<template>
	<view class="yb-tag yb-flex yb-row yb-align-center yb-justify-center" :id="customIdSync" :class="customClassSync" :style="rootStyle">
		<yb-text :lines="1" :size="optionsSync.size" :lineHeight="optionsSync.size" :color="colorSync" :value="value"></yb-text>
		<yb-tap stop style="margin-left: 10rpx;" v-if="closeable" @click="onClick">
			<yb-icon name="fork" :size="optionsSync.size" :color="colorSync"></yb-icon>
		</yb-tap>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			value: {
				type: String,
				default: ''
			},
			plain: {
				type: Boolean,
				default: false
			},
			mark: {
				type: Boolean,
				default: false
			},
			closeable: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: 'primary'
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			rootStyle () {
				return this.filterStyle(
					Object.assign({}, {
						width: Util.pixelunit(this.optionsSync.width),
						height: Util.pixelunit(this.optionsSync.height),
						'padding-left': (Util.unitpixel(this.optionsSync.size) / 1.3) + 'px',
						'padding-right': (Util.unitpixel(this.optionsSync.size) / 1.3) + 'px',
						'padding-top': (Util.unitpixel(this.optionsSync.size) / 2) + 'px',
						'padding-bottom': (Util.unitpixel(this.optionsSync.size) / 2) + 'px',
						'border-top-left-radius': this.mark ? 0 : Util.pixelunit(this.optionsSync.radius),
						'border-top-right-radius': Util.pixelunit(this.optionsSync.radius),
						'border-bottom-left-radius': this.mark ? 0 : Util.pixelunit(this.optionsSync.radius),
						'border-bottom-right-radius': Util.pixelunit(this.optionsSync.radius)
					}, this.plain ? {
						'border-width': '1px',
						'border-color': this.optionsSync.bgColor,
						'border-style': 'solid',
					} : {
						'background-color': this.optionsSync.bgColor,
					})
				)  + this.customStyleSync
			},
			optionsSync () {
				return Object.assign({}, {
					bgColor: this.type == 'primary' ? '#1989FA' : this.type == 'success' ? '#07C160' : this.type == 'danger' ? '#EE0A24' : '#FF976A',
					color: '#fff',
					size: '24rpx',
					width: 'auto',
					height: 'auto',
					radius: '5rpx'
				}, this.options)
			},
			colorSync () {
				return this.plain ? this.optionsSync.bgColor : this.optionsSync.color
			}
		},
		methods: {
			onClick () {
				this.$emit('close')
			}
		}
	}
</script>

<style>
	
</style>
